<template>
  <view class="df df-c container">
    <view
      @click="navToRefunds(10)"
      class="df df-c card-item receiv"
    >
      <text class="title">退货退款</text>
      <text class="meta">已收到货，退还收到的货物</text>
      <image
        :src="baseTemplateFileUri + 'image/afterSale/receiv.png'"
        class="image"
      ></image>
    </view>
    <view
      @click="navToRefunds(20)"
      class="df df-c card-item refunds bd-t"
    >
      <text class="title">仅退款</text>
      <text class="meta">未收到货，或与卖家协商无需退货</text>
      <image
        :src="baseTemplateFileUri + 'image/afterSale/refunds.png'"
        class="image"
      ></image>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },

  onLoad(option) {},

  onShow() {},

  computed: {
    ...mapState("afterSale", ["applicationRefundsData"])
  },

  methods: {
    ...mapMutations("afterSale", ["saveApplicationRefundsData"]),

    navToRefunds(type) {
      this.applicationRefundsData.refundsType = type;
      this.saveApplicationRefundsData(this.applicationRefundsData);
      let page = "refundsDetail";
      if (this.applicationRefundsData.isBatch) {
        page = `refundsBatch?orderId=${this.applicationRefundsData.orderId}`;
      }
      uni.navigateTo({
        url: `/pages/user/pages/afterSale/${page}`
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  background: $theme-main-bg-color;
  height: 100%;
}

.receiv {
  padding-bottom: 180rpx;
}
.card-item {
  margin: 0 64rpx;
  .title {
    margin-bottom: 20rpx;
    color: #232326;
    font-size: 40rpx;
  }
  .meta {
    margin-bottom: 80rpx;
    color: #4d4d4d;
    font-size: 28rpx;
  }
  .image {
    width: 164rpx;
    height: 164rpx;
  }
}
.refunds {
  padding-top: 100rpx;
}
</style>
